<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->

    <style>


        html, body {
            margin: 0;
            padding: 0;
            position: relative;
        }

        .dialog {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .8);
        }

        .loginPage {
            position: absolute;
            top: 40%;
            left: 50%;
            margin-top: -150px;
            margin-left: -175px;
            width: 350px;
            min-height: 300px;
            padding: 30px 20px 20px;
            border-radius: 8px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, .6);

        }

        .loginPage p {
            color: red;
            text-align: left;
        }

    </style>
</head>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<body>
<div id="app">

    <img src="/img/1.jpg" height="970px" width="100%"/>
    <div class="dialog">
        <div class="loginPage">
            <h1>登录</h1>
            <el-form>
            <el-form-item label="用户名">
            <el-input type="text" id="user" v-model="formName.user" ></el-input>
            <p>{{formName.userError}}</p>
            </el-form-item>
            <el-form-item label="密码">
            <el-input type="password" id="password" v-model="formName.password"></el-input>
            <p>{{formName.passwordError}}</p>
            </el-form-item>
            <el-checkbox id="rememberMe" v-model="checked">记住我</el-checkbox>
            <el-button type="primary">提交</el-button>

            <el-button @click="resetForm()">重置</el-button>
            </el-form>
        </div>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
        let _this = new Vue({
            el: '#app',
            data: {
                formName: {//表单中的参数
                    user: '',
                    userError: '',
                    password: '',
                    passwordError: '',
                    beDisabled: true,

                },
                checked: false,
                beShow: false//传值给父组件
            },
            created: function () {
                //todo
                // el-button @click="resetForm()">重置</el-button>
                //thymeleaf 解析 无法给el-button添加点击事件
            },
            methods: {
                resetForm:function(){
                    this.formName.user = '';
                    this.formName.userError = '';
                    this.formName.password = '';
                    this.formName.passwordError = '';
                },
            }
        })
</script>


</body>
</html>